import React, {useEffect, useState} from 'react';
import DeviceInfo from 'react-native-device-info';
//https://gitcode.net/mirrors/react-native-community/react-native-device-info?utm_source=csdn_github_accelerator
import {
  getUniqueId,
  getManufacturer,
  getAndroidId,
  getDevice,
} from 'react-native-device-info';
import {
  View,
  Button,
  Text,
  TextInput,
  StyleSheet,
  Dimensions,
  Image,
  Modal, PixelRatio,
} from 'react-native';
import '../utils/myglobal.js';
import mystyles from './mystyles';
import {loadData, storeData} from '../utils/storage_utils';
import InputModal from './InputModel';
import eventBus from '../utils/ContractEventBus';
import {setProxyUrls} from '../utils/myglobal';
import {LocalConfig} from '../localconfig';


const ChainInfo = () => {
  let chainId = global.chainId;
  let groupId = global.groupId;
  const [modalVisible, setModalVisible] = useState(false);
  const [proxyServer, setProxyServer] = useState(
    global.proxy_server !== undefined
      ? global.proxy_server
      : 'http://10.0.2.2:5000',
  );

  useEffect(() => {
    loadData(proxyKey).then(data => {
      if (data) {
        setProxyServer(data);
      }
    });
    return () => {};
  }, []);

  const handleCloseModal = () => {
    setModalVisible(false);
  };
  let proxyKey = global.proxyKey;
  const handleOk = url => {
    setModalVisible(false);
    console.log('new ProxyServer', url);
    if (url) {
      storeData(proxyKey, url).then(() => {
        setProxyServer(url);
        setProxyUrls(url);
        console.log('storage new proxyServer', proxyServer);
      });
    }
  };

  function doChangeProxy() {
    if (LocalConfig.proxy_quick_switch) {
      //调试时，用LocalConfig的临时开关proxy_quick_switch判断是否做快速切换，否则是打开一个模态窗口手输url
      var url = LocalConfig.proxy_server_local;
      if (proxyServer === LocalConfig.proxy_server_local) {
        url = LocalConfig.proxy_server_remote;
      }
      storeData(proxyKey, url).then(() => {
        setProxyServer(url);
        setProxyUrls(url);
        console.log('storage new proxyServer', proxyServer);
      });
    } else {
      setModalVisible(true);
    }
  }
  console.log('PixelRatio', PixelRatio.get());
  return (
    <>
      <InputModal
        visible={modalVisible}
        onCancel={handleCloseModal}
        onOk={handleOk}
        defaultText={proxyServer}
      />
      <View style={{flexDirection: 'row'}}>
        <Text style={[mystyles.SubTitle, {width: 150}]}>链ID: </Text>
        <Text style={mystyles.text}>{chainId} </Text>
      </View>
      <View style={{flexDirection: 'row'}}>
        <Text style={[mystyles.SubTitle, {width: 150}]}>组ID: </Text>
        <Text style={mystyles.text}>{groupId} </Text>
      </View>
      <View style={{flexDirection: 'row'}}>
        <Text style={[mystyles.SubTitle, {width: 150}]}>代理地址: </Text>
        <Text style={[mystyles.text, {flex: 1}]}>{proxyServer} </Text>
      </View>
      <Button title={'切换代理地址'} onPress={doChangeProxy} />
      <View style={{flexDirection: 'row'}}>
        <Text style={[mystyles.SubTitle, {width: 150}]}>版本信息: </Text>
        <Text style={mystyles.text}>{__DEV__ ? 'Debug' : 'Release'} </Text>
        <Text style={[mystyles.text, {flex: 1}]}>
          {DeviceInfo.getReadableVersion()}
        </Text>
      </View>
      <View style={{flexDirection: 'row'}}>
        <Text style={[mystyles.SubTitle, {width: 150}]}>设备信息: </Text>
        <Text style={[mystyles.text, {flex: 1}]}>
          {DeviceInfo.getManufacturerSync()}|{DeviceInfo.getDeviceId()}
        </Text>
      </View>
      <View style={{flexDirection: 'row'}}>
        <Text style={[mystyles.SubTitle, {width: 150}]}>屏幕信息: </Text>
        <Text style={[mystyles.text, {flex: 1}]}>
          w:{Dimensions.get('window').width.toFixed(1)}| h:
          {Dimensions.get('window').height.toFixed(1)}
          |p:{PixelRatio.get().toFixed(2)}
        </Text>
      </View>
    </>
  );
};

export default ChainInfo;

/*
  let device = '';
  getDevice().then(data => {
    console.log('Device is ', data);
    device = data;
  });
  DeviceInfo.getAndroidId().then(data => {
    console.log('Androidid is ', data);
  });
  console.log('getReadableVersion ', DeviceInfo.getReadableVersion());
  console.log('getVersion()', DeviceInfo.getVersion());
  console.log('getModel()', DeviceInfo.getModel());
  console.log('getDeviceId()', DeviceInfo.getDeviceId());
  console.log('getApplicationName()', DeviceInfo.getApplicationName());
  console.log('getDeviceType()', DeviceInfo.getDeviceType());
  console.log('getSystemName()', DeviceInfo.getSystemName());
  console.log('getSystemVersion()', DeviceInfo.getSystemVersion());
  console.log('getBrand()', DeviceInfo.getBrand());
  console.log('getBuildNumber()', DeviceInfo.getBuildNumber());
  console.log('getManufacturerSync()', DeviceInfo.getManufacturerSync());
  console.log('getBaseOsSync()', DeviceInfo.getBaseOsSync());
  */
